<template>
  <view class="my-order" ref="container">

    <view class="nav acea-row row-around">
      <view class="item" :class="{ on: type === -1 }" @click="changeType(-1)">
        <view>全部</view>
      </view>
      <view class="item" :class="{ on: type === 4 }" @click="changeType(4)">
        <view>已完成</view>
      </view>
      <view class="item" :class="{ on: type === 0 }" @click="changeType(0)">
        <view>待付款</view>
      </view>
      <view class="item" :class="{ on: type === 1 }" @click="changeType(1)">
        <view>待发货</view>
      </view>
      <view class="item" :class="{ on: type === 2 }" @click="changeType(2)">
        <view>待收货</view>
      </view>
<!--      <view class="item" :class="{ on: type === 3 }" @click="changeType(3)">-->
<!--        <view>待评价</view>-->
<!--      </view>-->
    </view>
    <view class="list">
      <view class="item" v-for="(order, orderListIndex) in orderList" :key="orderListIndex">
        <view class="title acea-row row-between-wrapper" style="border: none; height: 30rpx">
          <view class="acea-row row-middle">
            <!--            <span class="sign cart-color acea-row row-center-wrapper" v-if="order.combinationId > 0">拼团</span>-->
            <!--            <span class="sign cart-color acea-row row-center-wrapper" v-if="order.seckillId > 0">秒杀</span>-->
            <!--            <span class="sign cart-color acea-row row-center-wrapper" v-if="order.bargainId > 0">砍价</span>-->
            <!--            <span class="sign cart-color acea-row row-center-wrapper" v-if="order.storeId > 0">门店</span>-->
            下单时间：{{ order.createTime }}
          </view>
          <view class="font-color-red">{{ getStatus(order) }}</view>
        </view>
        <view @click="goOrderDetails(order)">
          <OrderGoodsDesign :evaluate="0" :isIntegral="false" :cartInfo="order.cartInfo" :order="order" />
        </view>
        <view class="bottom acea-row row-right row-middle" style="border-bottom: 1rpx solid #e4e4e4">
          <template v-if="order._status._type == 0">
            <view class="bnt cancelBnt" @click="cancelOrder(order)">取消订单</view>
            <view class="bnt bg-color-red" @click="goOrderDetails(order)">立即付款</view>
          </template>
          <template v-if="order._status._type == 1 || order._status._type == 9">
            <view class="bnt bg-color-red" @click="goOrderDetails(order)">查看详情</view>
          </template>
          <template v-if="order._status._type == 2">
            <view class="bnt default" @click="goLogistics(order)">查看物流</view>
            <view class="bnt bg-color-red" @click="takeOrder(order)">确认收货</view>
          </template>
          <template v-if="order._status._type == 3">
            <view class="bnt bg-color-red" @click="goOrderDetails(order)">去评价</view>
          </template>
          <template v-if="order._status._type === 4">
            <view class="bnt bg-color-red" @click="goOrderDetails(order)">查看订单</view>
          </template>
        </view>
      </view>
    </view>
    <view class="noCart" v-if="orderList.length === 0 && page > 1">
      <view class="pictrue">
        <image :src="`https://cos.aitshirt.cn/app-icon/%E7%BB%84%2014%402x.png`" />
      </view>
    </view>
    <!--    <Loading :loaded="loaded" :loading="loading"></Loading>-->
    <Payment v-model="pay" :types="payType" @checked="toPay" :balance="userInfo.nowMoney"></Payment>
  </view>
</template>
<script>
import { getOrderData, getOrderList } from '@/api/order'
import { cancelOrderHandle, payOrderHandle, takeOrderHandle } from '@/libs/order'
import Payment from '@/components/Payment'
import DataFormat from '@/components/DataFormat'
import OrderGoodsDesign from '@/components/OrderGoodsDesign.vue'
import { isWeixin, dataFormat } from '@/utils/oldIndex'
import { useAuthStore } from '@/state/modules/user';
const userStore = useAuthStore();
const STATUS = ['待付款', '待发货', '待收货', '待评价', '已完成', '', '', '', '', '待付款']
import {_router} from "@/utils/oldIndex";

const NAME = 'MyOrder'

export default {
  name: NAME,
  data() {
    return {
      offlinePayStatus: 2,
      orderData: {},
      type: '',
      page: 1,
      limit: 20,
      loaded: false,
      loading: false,
      orderList: [],
      pay: false,
      payType: ['yue', 'weixin'],
      from:  'routine',
    }
  },
  components: {
    // Loading,
    OrderGoodsDesign,
    Payment,
    DataFormat,
  },
  computed: {
    userInfo: function () {
      return userStore.user;
    },
  },
  onLoad(query) {
    this.type = query.type || -1
  },
  onShow: function() {
    console.log(this)
    // // parseInt(this.$yroute.query.type) ||
    // this.type =  0
    this.changeType(this.type)
    this.getOrderData()
    this.getOrderList()
  },
  onHide: function() {
    this.orderList = []
    this.page = 1
    this.limit = 20
    this.loaded = false
    this.loading = false
  },
  methods: {
    goLogistics(order) {
      _router.push({
        path: '/pages/order/Logistics/Logistics',
        query: { id: order.orderId },
      })
    },
    goOrderDetails(order) {
      _router.push({
        path: '/pages/order/OrderDetails/OrderDetails',
        query: { id: order.orderId },
      })
    },
    dataFormat,
    setOfflinePayStatus: function(status) {
      var that = this
      that.offlinePayStatus = status
      if (status === 1) {
        if (that.payType.indexOf('offline') < 0) {
          that.payType.push('offline')
        }
      }
    },
    getOrderData() {
      getOrderData().then(res => {
        this.orderData = res.data
      })
    },
    takeOrder(order) {
      takeOrderHandle(order.orderId).finally(() => {
        this.reload()
        this.getOrderData()
      })
    },
    reload() {
      this.changeType(this.type)
    },
    changeType(type) {
      this.type = type
      this.orderList = []
      this.page = 1
      this.loaded = false
      this.loading = false
      this.getOrderList()
    },
    getOrderList() {
      console.log('getOrerList', this.type
      )
      if (this.loading || this.loaded) return
      this.loading = true
      const { page, limit, type } = this
      getOrderList({
        page,
        limit,
        type,
      }).then(res => {
        this.orderList = this.orderList.concat(res.data)
        this.page++
        this.loaded = res.data.length < this.limit
        this.loading = false
      })
    },
    getStatus(order) {
      return STATUS[order?._status?._type]
    },
    cancelOrder(order) {
      cancelOrderHandle(order.orderId)
        .then(() => {
          this.getOrderData()
          this.orderList.splice(this.orderList.indexOf(order), 1)
        })
        .catch(() => {
          this.reload()
        })
    },
    paymentTap: function(order) {
      var that = this
      if (!(order.combinationId > 0 || order.bargainId > 0 || order.seckillId > 0)) {
        that.setOfflinePayStatus(order.offlinePayStatus)
      }
      this.pay = true
      this.toPay = type => {
        payOrderHandle(order.orderId, type, that.from)
          .then(() => {
            const type = parseInt(this.$yroute.query.type) || 0
            that.changeType(type)
            that.getOrderData()
          })
          .catch(() => {
            const type = parseInt(that.$yroute.query.type) || 0
            that.changeType(type)
            that.getOrderData()
          })
      }
    },
    toPay() {},
  },
  mounted() {},
  onReachBottom() {
    !this.loading && this.getOrderList()
  },
}
</script>

<style scoped lang="less">
//@import '../../../style/style';
.noCart {
  margin-top: 0.17 * 100rpx;
  padding-top: 0.1 * 100rpx;
}

.noCart .pictrue {
  width: 4 * 100rpx;
  height: 3 * 100rpx;
  overflow: hidden;
  margin: 0.7 * 100rpx auto 0.5 * 100rpx auto;
}

.noCart .pictrue image {
  width: 4 * 100rpx;
  height: 3 * 100rpx;
}

.bottom {
  .bnt {
    min-width: 130rpx !important;
    height: 48rpx !important;
    background: #f3f7f8 !important;
    border-radius: 4rpx 4rpx 4rpx 4rpx !important;
    font-weight: 400 !important;
    font-size: 24rpx !important;
    color: #222222 !important;
    line-height: 48rpx !important;
    text-align: center !important;
    padding: 0 16rpx !important;
    border: none !important;
    &.bg-color-red {
      background: #f25a27 !important;
      color: #ffffff !important;
    }
  }
}
</style>

<style lang="less" scoped>
.my-order {
  min-height: 100vh;
  background: #F3F7F8;
  padding: 16rpx 0 0;
  .nav {
    margin: 0 !important;
    width: 750rpx;
    height: 88rpx !important;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 0rpx 0rpx !important;
    border-bottom: 1rpx solid #E4E4E4 !important;
    .item {
      .on {
        font-size: 28rpx !important;
      }
    }
  }
  .list {
    width: 100% !important;
    background: #FFFFFF;
    margin: 0 !important;
    padding: 16rpx 0 0;
  }
}
</style>
